跳到主要内容

Price 价格

介绍​

价格组件，用于展示商品价格信息。

用法​

基本引入​

import { FQPrice } from '@fq/fq-weapp-ui-pro';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui-pro/dist/styles/components/price.scss';

基础用法​

<FQPrice size={28} price='543' />
<FQPrice size={32} price='543' />
<FQPrice size={36} price='543' />
<FQPrice size={40} price='543' />
<FQPrice size={48} price='543' />
<FQPrice size={56} price='543' />
<FQPrice size={64} price='543' />
<FQPrice size={80} price='543' />

修改symbol符号 & 位置​

<FQPrice price='543' symbol={null} />
<FQPrice price='543' symbol='$' />
<FQPrice price='543' symbol='元' symbolPosition='after' />

设置原价​

<FQPrice price='543' originalPrice='337' />

显示后缀文案​

<FQPrice price='543' showSuffixText />

设置价格颜色​

<FQPrice
  price='543'
  originalPrice='337'
  showSuffixText
  priceBefore='优惠价'
  priceAfter='到手价'
  colors={{
    priceBefore: '#FF0000',
    priceAfter: '#0000FF',
    price: '#000000',
    suffixText: '#00FF00',
    originalPrice: '#ffeb3b',
  }}
/>

设置价格字重​

<FQPrice
  price='543'
  originalPrice='337'
  showSuffixText
  priceBefore='优惠价'
  priceAfter='到手价'
  weight='bold'
/>

价格后缀-文案​

<FQPrice
  price='543'
  originalPrice='337'
  showSuffixText
  priceAfter='券后价'
/>

价格后缀-图片​

 <FQPrice
  price='543'
  originalPrice='337'
  showSuffixText
  priceAfterIcon
  priceAfter={{
    src: 'https://stantic.ifengqun.com/front/fq-oms-extsys/upload/1d0dc847a0cd20135a65f50e4949a3c4.jpg?x-oss-process=image/format,webp/interlace,1',
    text: '券后价',
  }}
/>

 <FQPrice
  price='543'
  originalPrice='337'
  showSuffixText
  priceAfterIcon
  priceAfter={{
    text: '不传图片会有默认的',
  }}
/>

完整价格展示​

<FQPrice
  size={36}
  price='543'
  originalPrice='337'
  showSuffixText
  priceBefore='优惠价'
  priceAfter='到手价'
/>

API​

属性​

参数说明类型默认值版本
classNames配置价格内置模块的 classNameRecord<SemanticDOM, string>-v0.6.0
colors配置价格内置模块的 colorRecord<SemanticDOM, string>-v0.6.0
originalPrice设置原始价格number / string-
price设置价格number / string-
priceAfter设置价格后文案string-
priceBefore设置价格前文案string-
size设置价格大小，以主价格大小为准28 / 32 / 36 / 40 / 48 / 56 / 64 / 8036
showSuffixText是否显示后缀文案（起）booleanfalse
symbol符号类型string￥
symbolPosition设置符号显示在价格前或者后'before' / 'after''before'
styles配置价格内置模块的 styleRecord<SemanticDOM, React.CSSProperties>-v0.6.0
weight设置价格字重'light' / 'normal' / 'medium' / 'bold' / 300 / 400 / 500 / 700500v0.6.0

SemanticDOM​

参数说明
originalPrice原价
priceBefore价格前文案
priceAfter价格后文案
price价格
suffixText后缀文案